<template>
    <el-form :model="params" :status-icon="statusIcon" :label-suffix="labelSuffix" :rules="rules" ref="phqAppForm" :label-width="labelWidth">
        <slot></slot>
    </el-form>
</template>

<script lang="ts">
import {defineComponent, onMounted, ref} from "vue";

/**
 * state 数据类型
 */
export default defineComponent({
    name: "PForm",
    props: {
        params: {
            type: Object,
            default: () => ({})
        },
        labelWidth: {
            type: [String, Number],
            default: ""
        },
        rules: {
            type: Object,
            default: () => ({})
        },
        labelSuffix: {
            type: String,
            default: ""
        },
        statusIcon:{
            type:Boolean,
            default:false
        },

    },
    emits:["update:modelValue"],
    setup(props, {emit}) {
        const phqAppForm = ref();

        /**
         * 清理指定字段的表单验证信息。 参数是一个或多个需要清除验证信息的表单属性名。 如果省略了参数，将清除所有字段的验证信息。
         */
        function clearValidate(field = undefined) {
            phqAppForm.value.clearValidate(field);
        }

        /**
         * 对整个表单作验证。 参数为一个回调函数。 验证表单后，回调函数会包含两个参数：一个布尔值，表示表单验证是否通过；一个对象，包含所有未通过验证的字段
         * @param callback (clear,obj) => {} clear:清除表单验证状态回调函数，obj未通过验证的字段
         * @param error () => {}
         */
        function validForm(callback = (clear:any, obj:any) => false, error = () => false) {
            phqAppForm.value.validate((valid:any, object:any) => {
                if (valid) {
                    callback(clearValidate, object);
                } else {
                    error();
                }
            });
        }

        onMounted(() => {
            emit("update:modelValue", validForm);
        });
        return {
            phqAppForm
        };
    },
});
</script>

<style lang="scss" scoped>

</style>
